import React, { useState, useEffect } from 'react'
import ProTable from '@ant-design/pro-table';
import { Button, Radio, Modal, Select, Input, Table } from 'antd';
import { isRepeat } from '@/utils/utils'

export default function Index() {

  const myStyles = {
    flexRow: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      flexWrap: 'wrap'
    }
  }

  const [optionRadio, setoptionRadio] = useState('norm');
  const [columns, setcolumns] = useState([]);
  const [dataSource, setdataSource] = useState([]);
  const [editModalMsg, seteditModalMsg] = useState({ show: false });
  const [startingSelect, setstartingSelect] = useState([
    { title: '中国境内', value: 'domestic' },
    { title: '中国香港', value: 'hongkong' },
    { title: '中国台湾', value: 'taiwan' },
  ]);
  const [arrivalSelect, setarrivalSelect] = useState([
    { title: '中国境内', value: 'domestic' },
    { title: '中国香港', value: 'hongkong' },
  ]);
  const [exceedNumers, setexceedNumers] = useState(['500', '1000'])
  useEffect(() => {
    console.log(optionRadio)
  }, [optionRadio])
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };
  const closeModal = () => {
    seteditModalMsg({ show: false })
  }
  const addNorm = () => {
    if (exceedNumers.length < 3) {
      setexceedNumers([...exceedNumers, ''])
    }

  }
  const reduceNorm = () => {
    if (exceedNumers.length > 1) {
      let copyexceedNumers = JSON.parse(JSON.stringify(exceedNumers));
      copyexceedNumers.pop();
      setexceedNumers(copyexceedNumers)
    }
  }
  const startingSelectHandle = (v) => {

  }
  const arrivalSelectHandle = (v) => {

  }
  const NestedTable = (tableType) => {
    let data = [
      {
        a: '中国境内',
        b: '中国香港',
        c: [{
          type: '所有舱位',
          e: [500, 1000],
          f: '159-300cm 500CNY/件',
          overweightNorm: [
            { kg: '23-32kg', money: '500CNY/件' },
            { kg: '23-32kg', money: '500CNY/件' }
          ],
        }],
        d: '超过20kg 60CNY/件'
      },
      {
        a: '中国境内',
        b: '日本',
        c: [
          {
            type: '公务舱',
            e: [500, 1000, 1500],
            f: '159-300cm 500CNY/件',
            overweightNorm: [
              { kg: '23-32kg', money: '500CNY/件' },
              { kg: '23-32kg', money: '500CNY/件' }
            ]
          },
          {
            type: '经济舱',
            e: [500],
            f: '159-300cm 500CNY/件',
            overweightNorm: [
              { kg: '23-32kg', money: '500CNY/件' },
            ]
          }
        ],
        d: '超过20kg 60CNY/件'
      },

      {
        a: '中国境内',
        b: '迪拜',
        c: [
          {
            type: '公务舱',
            e: [500, 1000],
            f: '159-300cm 500CNY/件',
            overweightNorm: [
              { kg: '23-32kg', money: '500CNY/件' },
              { kg: '23-32kg', money: '500CNY/件' }
            ]
          },
          {
            type: '经济舱',
            e: [1000, 1500],
            f: '159-300cm 500CNY/件',
            overweightNorm: [
              { kg: '23-32kg', money: '500CNY/件' },
            ]
          }
        ],
        d: '超过20kg 60CNY/件'
      },
    ];
    const toolBarRender = () => {
      return [
        <Button type="primary" onClick={() => { seteditModalMsg({ show: true }) }}>新建</Button>,
        <Button type="primary">编辑</Button>,
        <Button type="primary">删除</Button>,
        <Button type="primary">拷贝并新建</Button>
      ]
    }
    const expandedRowRender = (row) => {
      console.log(row, row.c)

      const sonColumns = [
        { title: "舱等类型", dataIndex: "type", key: "type" },
        {
          title: "超件标准", dataIndex: "e", key: "e",
          render: (value, row, index) => (
            value.map((item, sonindex) => (
              <div>
                <span>第{sonindex + 1}件</span>
                <span>{item}CNY/件</span>
              </div>
            ))
          )
        },
        { title: "超尺寸标准", dataIndex: "f", key: "f" },
        {
          title: "超重标准", dataIndex: "overweightNorm", key: "overweightNorm",
          render: (value, row, index) => (
            value.map((item) => {
              return (
                <div>
                  <span>{item.kg}</span>
                  <span>{item.money}</span>
                </div>
              )
            })
          )
        },
      ]
      const sonData = row.c;

      return <Table columns={sonColumns} dataSource={sonData} pagination={false} />;
    };
    if (tableType === 'norm') {
      const columns = [
        { title: "始发地", dataIndex: "a", key: "a" },
        { title: "到达地", dataIndex: "b", key: "b" },
        {
          title: "舱等类型", dataIndex: "c", key: "c",
          render: (value, row, index) => {
            if (value.length > 1) {
              return '区分舱等'
            } else {
              return '不区分舱等'
            }
          }
        },
      ];
      return (
        <ProTable
          headerTitle="超售信息"
          bordered
          columns={columns}
          dataSource={data}
          expandedRowRender={expandedRowRender}
          rowSelection={{
            type: 'checkbox',
            ...rowSelection,
          }}
          toolBarRender={toolBarRender}
        />
      );
    } else {
      const columns = [
        { title: "始发地", dataIndex: "a", key: "a" },
        { title: "到达地", dataIndex: "b", key: "b" },
        {
          title: "舱等类型", dataIndex: "c", key: "c",
          render: (value, row, index) => {
            if (value.length > 1) {
              return '区分舱等'
            } else {
              return '不区分舱等'
            }
          }
        },
        { title: "逾重标准", dataIndex: "d", key: "d" },
      ];
      return (
        <ProTable
          headerTitle="超售信息"
          bordered
          columns={columns}
          dataSource={data}
          rowSelection={{
            type: 'checkbox',
            ...rowSelection,
          }}
          toolBarRender={toolBarRender}
        />
      )
    }

  }
  const isRepeat = ((arr, key) => {
    let count = 1, firstIndex = -1;
    arr.sort((a, b) => {
      return a[key].localeCompare(b[key], "zh");
    });
    for (let i = 0; i < arr.length; i++) {
      try {
        if (arr[i][key] === arr[i + 1][key]) {
          count++
        }
      } catch (e) {

      }
    }
    for (let i = 0; i < arr.length; i++) {
      try {
        if (arr[i][key] === arr[i + 1][key]) {
          firstIndex = i;
          break;
        }
      } catch (e) {

      }
    }
    return {
      count,
      firstIndex,
    }
  })
  return (
    <>
      <div style={{
        display: 'flex',
        flexDirection: 'row-reverse',
        background: '#fff'
      }}>
        <Radio.Group buttonStyle="solid" value={optionRadio}
          onChange={(val) => {
            setoptionRadio(val.target.value);
          }}>
          <Radio.Button value="special">特殊配置</Radio.Button>
          <Radio.Button value="norm">标准配置</Radio.Button>
        </Radio.Group>
      </div>
      {NestedTable(optionRadio)}
      {/* <ProTable
        headerTitle="超售信息"
        bordered
        columns={columns}
        dataSource={dataSource}
        rowSelection={{
          type: 'checkbox',
          ...rowSelection,
        }}
        toolBarRender={() => [
          <Button type="primary" onClick={() => { seteditModalMsg({ show: true }) }}>新建</Button>,
          <Button type="primary">编辑</Button>,
          <Button type="primary">删除</Button>,
          <Button type="primary">拷贝并新建</Button>
        ]}
      // request={(params) => {
      //   let a = {
      //     beginFlightDate: '2020-11-19',
      //     endFlightDate: '2020-11-20'
      //   }
      //   return queryFlightTable({ ...params, ...a })
      // }}
      >
      </ProTable> */}
      <Modal
        title="Basic Modal"
        visible={editModalMsg.show}
        footer={null}
        width='80%'
        // onOk={this.handleOk}
        onCancel={closeModal}
      >
        <div>
          <div style={myStyles.flexRow}>
            <div>
              <span>始发站：</span>
              <Select placeholder="请选择始发站" style={{ width: 150 }} onChange={startingSelectHandle}>
                {
                  startingSelect.map(itme => (
                    <Option value={itme.value}>{itme.title}</Option>
                  ))
                }
              </Select>
            </div>
            <div style={{ marginLeft: '20px' }}>
              <span>到达地：</span>
              <Select placeholder="请选择到达地" style={{ width: 150 }} onChange={arrivalSelectHandle}>
                {
                  arrivalSelect.map(itme => (
                    <Option value={itme.value}>{itme.title}</Option>
                  ))
                }
              </Select>
            </div>
            <div>
              <Button type="primary">合并舱位</Button>
            </div>
          </div>
          <div>经济舱</div>
          <div>
            <span>超件</span>
            <Button icon="plus" size="small" onClick={addNorm}>增加标准</Button>
            <Button icon="minus" size="small" onClick={reduceNorm}>减少标准</Button>
          </div>
          <div style={myStyles.flexRow}>
            {
              exceedNumers.map((item, index) => (
                <div style={{ marginLeft: '10px' }}>
                  <span>第{index}件</span>
                  <Input style={{ width: '100px' }} placeholder="标准" value={item} />
                  <span>CNY/件</span>
                </div>
              ))
            }
          </div>
          <div>超尺寸</div>
          <div>
            <div style={myStyles.flexRow}>
              <Input style={{ width: '100px' }} placeholder="标准" />
              <span>-</span>
              <Input style={{ width: '100px' }} placeholder="标准" />
              <span>CM</span>
              <Input style={{ width: '100px' }} placeholder="标准" />
              <span>CNY/件</span>
            </div>
          </div>
          <div>超重</div>
          <div>
            <div style={myStyles.flexRow}>
              <Input style={{ width: '100px' }} placeholder="标准" />
              <span>-</span>
              <Input style={{ width: '100px' }} placeholder="标准" />
              <span>CM</span>
              <Input style={{ width: '100px' }} placeholder="标准" />
              <span>CNY/件</span>
            </div>
          </div>
        </div>
      </Modal>
    </>
  )
}
